<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>注册</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/register.css">
    <!--<script>
        function check() {
            var nodes = document.getElementById("username")
            var mag = document.getElementById("usernameMag")
            var reg = /^\s*$/;
            if (reg.test(nodes.value)){
                mag.innerHTML="不能为空"
                return false;
            }else {
                return true;
            }
        }
    </script>-->
</head>
<body>
<header>
    <div class="desc">欢迎注册</div>
</header>
<section>
    <form action="">
        <div class="register-box">
            <label class="username_label">用 户 名
                <input  name="username" maxlength="20" type="text" placeholder="您的用户名和登录名" >

            </label>
            <div class="tips">

            </div>

        </div>
        <div class="register-box">
            <label  class="other_label">设 置 密 码
                <input  id="password1" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label  class="other_label">确 认 密 码
                <input id="password2" name="password" maxlength="20" type="password" placeholder="请再次输入密码">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label  class="other_label">
                <span>中国 0086∨</span>
                <input name="number" class="phone" maxlength="20" type="text" placeholder="建议使用常用手机">
            </label>
            <div class="tips">

            </div>
        </div>
        <div class="register-box">
            <label  class="other_label">验 证 码
                <input maxlength="20" type="text" placeholder="请输入验证码">
            </label>
            <span id="code"></span>
            <div class="tips">

            </div>
        </div>
        <div class="arguement">
            <input type="checkbox" id="xieyi">
            阅读并同意
            <a href="#">《京东用户注册协议》</a>
            <a href="#">《隐私政策》</a>
            <div class="tips">

            </div>
        </div>
        <div class="submit_btn">
            <button type="submit" id="submit_btn" @click="reg()">立 即 注 册</button>
        </div>
    </form>
</section>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入 axios 框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/register.js" charset="utf-8"></script><!--属性设置转到js包下index.js-->

<script>
    let v = new Vue({
        el: "body>div",
        data: {
            user: {
                username:'',
                password:'',
                code:'',
                rem: false}
        },
        methods: {
            login() {
                axios.post("/user/login", v.user).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        //alert("登录成功,jwt=" + responseBody.data)
                        localStorage.setItem('jwt', responseBody.data);
                        if(v.user.rem){
                            localStorage.setItem('username',v.user.username);
                            localStorage.setItem('password',v.user.password);
                        }
                        this.location.href='/index.html';
                    } else {
                        this.$message.error(responseBody.message);
                    }
                })
            }
        },
        created: function () {

            this.user.username = localStorage.getItem("username");
            this.user.password = localStorage.getItem("password");
        }
    })
</script>

</body>
</html>